<template>
    <div class="app-modal">
        <van-dialog v-model="isShow" :show-confirm-button="false">
            <component :is="componentName" :isModalMode="true" :viewdata="viewdata" :selectedData="selectedData" @viewdataschange="viewDatasChange"  @close="colse" class="view-modal-container"></component>
        </van-dialog>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Provide, Emit, Watch } from 'vue-property-decorator';
import { Subject } from 'rxjs';
@Component({
    components: {
    }
})
export default class AppModal extends Vue {

    /**
     * 输入组件名
     *
     * @type {string}
     * @memberof AppModal
     */
    @Prop() public componentName!: string;

    /**
     * 视图数据
     *
     * @type {any}
     * @memberof AppModal
     */
    @Prop() public viewdata:any;

    /**
     * 数据选择视图选中项
     *
     * @type {any}
     * @memberof AppModal
     */
    @Prop() public selectedData?:any;

     /**
     * 是否展示
     *
     * @type {boolean}
     * @memberof AppModal
     */
    public isShow: boolean = false;

    /**
     * 可观察对象
     *
     * @type {Subject}
     * @memberof AppModal
     */
    public subject = new Subject();

    /**
     * 显示
     *
     * @memberof AppModal
     */
    public show() {
        this.isShow = true;
        return this.subject;
    }

    /**
     * 隐藏
     *
     * @memberof AppModal
     */
    public  hide(item?:any) {
        this.isShow = false;
        this.subject.next(item);
        this.subject.asObservable();
        document.body.removeChild(this.$el);
        this.$destroy();
     }

    /**
     * 视图数据修改
     *
     * @memberof AppModal
     */    
    public viewDatasChange($event:any){
        if(!Object.is($event.action,'load') && !Object.is($event.action,'save')){
            this.hide($event.data);
        }
    }

    /**
     * 视图关闭
     *
     * @memberof AppModal
     */  
    public colse(args?:any){
        args?this.hide(args.data):this.hide();
    }

        
 	}
</script>
<style lang="less">
    .app-modal{
        .van-overlay{
            background-color: rgba(243, 240, 240, 0.7) !important;
        }
        .van-dialog {
            top: 50% !important;
            width: 100% !important;
            height: 100% !important;
            overflow: hidden;
            font-size: 16px;
            border-radius: 0px !important;
            z-index:2100;
        }
    }
</style>